<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>宿舍网站</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <img src="tp/logo.jpg" alt="宿舍网站Logo" class="logo">
        <nav>
            <a href="#home">首页</a>
            <a href="members.html">宿舍成员</a>
            <a href="life.html">宿舍生活</a>
            <a href="stories.html">宿舍故事</a>
            <a href="about.html">关于我们</a>
        </nav>
    </header>

    <!-- Banner图（轮播图部分简化示例，这里假设只有2张图） -->
    <div class="slider">
        <div class="slides">
        <div class="slide"><img src="tp/fs.jpg" alt=""></div>
        <div class="slide"><img src="tp/zs.jpeg" alt=""></div>
 </div>
</div>

    <!-- 主要内容区域 -->
    <main>
        <!-- 宿舍简介 -->
        <section id="home">
            <h2>宿舍简介</h2>
            <p>这里是我们的小窝，温暖又舒适，充满欢声笑语，是彼此的港湾。</p>
        </section>

        <!-- 最新动态 -->
        <section>
            <h2>最新动态</h2>
            <img src="tp/bw.jpg" alt="最新活动照片">
            <p>八万</p>
        </section>

        <!-- 精彩瞬间 -->
        <section>
            <h2>精彩瞬间</h2>
            <img src="tp/jingc.jpg" alt="精彩瞬间1">
        </section>

        <!-- 友情链接 -->
        <section>
            <h2>友情链接</h2>
            <a href="https://www.hceb.edu.cn/">学校官网</a>
        </section>
    </main>

    <!-- 底部 -->
    <footer>
        <p>版权归本宿舍所有，20XX - 20XX</p>
        <p>邮箱：dorm@example.com</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>